<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
        xmlns:calli="http://callimachusproject.org/rdf/2009/framework#">
<head>
    <title resource="?this">{rdfs:label} Sign Up</title>
    <link rel="help" href="../../callimachus-for-web-developers" target="_blank" title="Help" />
    <link rel="stylesheet" href="../assets/jquery-validate.password/jquery.validate.password.css" />
    <script type="text/javascript" src="../assets/jquery-validate.password/lib/jquery.validate.js"></script>
    <script type="text/javascript" src="../assets/jquery-validate.password/jquery.validate.password.js"></script>
    <script type="text/javascript" src="../assets/jshash/md5.js"></script>
    <script type="text/javascript">//<![CDATA[
        jQuery(function($) {
            function parameter(name) {
                var regex = new RegExp("[\\?&]"+name+"=([^&#]*)");
                var m = regex.exec(window.location.search);
                return m ? decodeURIComponent(m[1]) : null;
            }
            $('#email').val(parameter("email"));
            $('#username').val(parameter("email").replace(/@.*/,''));
            $('#fullname').val(parameter("fullname") || $('#username').val());
            $("#form").validate({submitHandler: function(form) {
                var username = $("#username").val();
                var email = $('#email').val();
                var authName = $("#authName").text();
                var password = $("#password").val();
                var hash1 = hex_md5(username + ':' + authName + ':' + password);
                var hash2 = hex_md5(email + ':' + authName + ':' + password);
                jQuery.ajax({type: 'POST', url: form.action,
                    traditional: true,
                    data: {
                        nonce: parameter("nonce"),
                        token: parameter("token"),
                        fullname: $("#fullname").val(),
                        email: parameter('email'),
                        "auth-email": email,
                        username: username,
                        password: [hash1, hash2]
                    },
                    success: function() {
                        window.location.replace('?login&return_to=' + encodeURIComponent(parameter('return_to')));
                    }
                });
                return false;
            }});
        });
        // ]]>
    </script>
</head>
<body resource="?this">
    <hgroup>
        <h1>{rdfs:label} Sign Up</h1>
        <h2 id="authName">{calli:authName}</h2>
    </hgroup>
    <div id="sidebar">
        <aside>
            <p>Your full name is used to indentify your work on this website</p>
            <p>Your E-mail address is used to manage your password and is not shown on the website</p>
            <p>Your username is used to uniquely identify your account on this website</p>
            <p>Please double check your email address is correct before signing up</p>
        </aside>
    </div>
    <p>{rdfs:comment}</p>
    <p>To accept this invitation please confirm the information belove and provide a password.</p>
    <form role="form" id="form" method="POST" action="?register">
        <div class="form-group">
            <label for="fullname">Full name</label>
            <div class="controls">
                <input id="fullname" name="fullname" type="text" class="form-control" required="required" />
            </div>
        </div>
        <div class="form-group">
            <label for="email">Email address</label>
            <div class="controls">
                <input id="email" name="email" type="text" class="form-control" required="required" />
            </div>
        </div>
        <div class="form-group">
            <label for="username">Username</label>
            <div class="controls">
                <input id="username" name="username" type="text" class="form-control" required="required" />
            </div>
        </div>
        <div class="form-group">
        	<label for="password">New password</label>
    		<div class="controls">
                <input id="password" type="password" password="#email"  class="form-control password" onkeyup="$(this).valid()" required="required" autofocus="autofocus" />
                <div class="password-meter">
                    <label for="password" class="password-meter-message" />
                    <div class="password-meter-bg">
                        <div class="password-meter-bar"></div>
                    </div>
                </div>
    		</div>
        </div>
        <div class="form-group">
            <button id="signup" type="submit" class="btn btn-primary">Yes, sign me up!</button>
            <button id="later" type="button" class="btn btn-default" onclick="window.location.replace('/')">I'll come back later</button>
        </div>
    </form>
</body>
</html>
